<template>
	<view class="message-wrapper">
		<top-nav title="消息中心"></top-nav>
		<u-swipe-action :show="item.show" :index="index" 
					v-for="(item, index) in list" :key="item.id" 
					@click="clickFun" @open="open"
					:options="options">
			<view class="item">
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="top">
					<view class="time">{{item.add_time}}</view>
					<view class="new" v-if="item.new">最新</view>
				</view>
				<view class="message">{{ item.content }}</view>
			</view>
		</u-swipe-action>
		<u-loadmore :status="status" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	export default{
		components:{
			topNav:topNav
		},
		data(){
			return {
				status: 'loadmore',
				page:1,
				list: [],
				count:0,
				options: [
						{
							text: '已读',
							style: {
								backgroundColor: '#FFB721',
								width: '270rpx'
							}
						},
						{
							text: '清除',
							style: {
								backgroundColor: '#FD6F6F',
								width: '270rpx'
							}
						}
					]
			}
		},
		created(){
			this.getInfo(1);
		},
		onReachBottom() {
			if(this.list,length >= this.count) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			this.getInfo(this.page)
		},
		methods:{
			getInfo(page){
				this.$u.post('/api/newsList', {account_id:uni.getStorageSync('account_id'),page:page,limit:10}).then(res=>{
					if(res.code==200){
						this.list = [].concat(this.list,res.data.map(item=>{
							item.show=false
							return item
						}))
						this.count = res.count;
						if(this.list.length<this.count){
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			},
			clickFun(index, index1) {
				if(index1 == 1) {
					this.$u.post('/api/delNewsList', {account_id:uni.getStorageSync('account_id'),id:this.list[index].id}).then(res=>{
						if(res.code==200){
							this.$refs.uToast.show({
								title: res.message,
								type: 'success',
							})
							this.list.splice(index, 1);
						} else {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error',
							})
						}
					})
				} else {
					this.$u.post('/api/seeNewsList', {account_id:uni.getStorageSync('account_id'),id:this.list[index].id}).then(res=>{
						if(res.code==200){
							this.$refs.uToast.show({
								title: '标记成功',
								type: 'success',
							})
							this.list[index].show = false;
						} else {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error',
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-wrapper{
		.item{
			height:85*2rpx;
			background-color:#202020;
			padding:0 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.top{
				display: flex;
				align-items: center;
				margin-bottom:10rpx;
				.time{
					color:rgba(255,255,255,0.5);
					font-size:14*2rpx;
				}
				.new{
					font-size:12*2rpx;
					color:#69DA73;
					margin-left:20rpx;
				}
			}
		}
	}
</style>
